<div class="cd-navbar-main">
  <!-- ************************ -->
  <!-- NOTIFICATIONS     -->
  <!-- ************************ -->
  <cd-notifications-sidebar></cd-notifications-sidebar>
  <!-- ************************ -->
  <!-- HEADER                   -->
  <!-- ************************ -->
  <cds-header name="Ceph Dashboard"
              class="cd-navbar-top"
              [brand]="brandTemplate">
    <cds-hamburger [active]="showMenuSidebar"
                   data-testid="main-menu-toggler"
                   (selected)="showMenuSidebar = !showMenuSidebar"></cds-hamburger>
    <!-- ************************* -->
    <!-- CLUSTER SWITCHER TEMPLATE -->
    <!-- ************************* -->
    <cds-header-navigation class="cluster-switcher"
                           *ngIf="clustersMap?.size > 1">
      <cds-header-menu [title]="currentClusterName"
                       data-testid="selected-cluster">
        <ng-container *ngFor="let cluster of clustersMap | keyvalue; trackBy:trackByFn ">
          <cds-header-item (click)="onClusterSelection(cluster.value)"
                           [class.disabled]="cluster.value.cluster_connection_status === 1"
                           data-testid="select-a-cluster">
              {{ cluster.value.name }} - {{ cluster.value?.cluster_alias }} - {{ cluster.value?.user }}
          </cds-header-item>
        </ng-container>
      </cds-header-menu>
    </cds-header-navigation>

    <cds-header-global>
      <cds-header-navigation>
        <cd-language-selector class="d-flex"></cd-language-selector>
      </cds-header-navigation>
      <div class="cds--btn cds--btn--icon-only cds--header__action">
        <cd-notifications (click)="toggleRightSidebar()"></cd-notifications>
      </div>
      <div class="cds--btn cds--btn--icon-only cds--header__action">
        <cd-dashboard-help></cd-dashboard-help>
      </div>
      <div class="cds--btn cds--btn--icon-only cds--header__action">
        <cd-administration></cd-administration>
      </div>
      <div class="cds--btn cds--btn--icon-only cds--header__action">
        <cd-identity></cd-identity>
      </div>
    </cds-header-global>
  </cds-header>
  <!-- ***************************** -->
  <!-- LOGO BRAND TEMPLATE  -->
  <!-- ***************************** -->
  <ng-template #brandTemplate>
    <a class="cds--header__name navbar-brand ms-3"
       routerLink="/dashboard">
      <img src="assets/Ceph_Ceph_Logo_with_text_white.svg"
           alt="Ceph" />
    </a>
  </ng-template>
  <!-- **************************************** -->
  <!-- WRAPPER AROUND SIDENAV AND MAIN CONTAINT -->
  <!-- **************************************** -->
  <div class="wrapper">
    <!-- Content -->
    <nav id="sidebar"
         [ngClass]="{'active': !showMenuSidebar}">
      <ng-container *ngTemplateOutlet="cd_menu"></ng-container>
    </nav>
    <!-- Page Content -->
    <div id="content"
         [ngClass]="{'active': !showMenuSidebar, 'content-theme': true}">
      <ng-content></ng-content>
    </div>
  </div>
  <!-- ************************ -->
  <!-- SIDENAV                  -->
  <!-- ************************ -->
  <ng-template #cd_menu>
    <ng-container *ngIf="enabledFeature$ | async as enabledFeature">
      <cds-sidenav [expanded]="showMenuSidebar"
                   class="mt-5">
        <!-- Dashboard -->
        <cds-sidenav-item route="/dashboard"
                          [useRouter]="true"
                          title="Dashboard"
                          i18n-title
                          class="nav-item tc_menuitem_dashboard">
          <svg cdsIcon="template"
               icon
               size="20"></svg>
          <span i18n>
            Dashboard</span>
        </cds-sidenav-item>
        <!-- Multi-cluster Dashboard -->
        <cds-sidenav-menu title="Multi-Cluster"
                          i18n-title>
          <svg cdsIcon="edge-cluster"
               icon
               size="20"></svg>
          <cds-sidenav-item route="/multi-cluster/overview"
                            title="Overview"
                            i18n-title
                            [useRouter]="true"
                            class="tc_submenuitem tc_submenuitem_multiCluster_overview"><span i18n>Overview</span></cds-sidenav-item>
          <cds-sidenav-item route="/multi-cluster/manage-clusters"
                            title="Manage Clusters"
                            i18n-title
                            [useRouter]="true"
                            class="tc_submenuitem tc_submenuitem_multiCluster_manage_clusters"><span i18n>Manage Clusters</span></cds-sidenav-item>
        </cds-sidenav-menu>
        <!-- Cluster -->
        <cds-sidenav-menu title="Cluster"
                          i18n-title
                          *ngIf="permissions.hosts.read || permissions.monitor.read || permissions.osd.read || permissions.pool.read"
                          class="tc_menuitem_cluster">
          <svg cdsIcon="web-services--cluster"
               icon
               size="20"></svg>
          <cds-sidenav-item route="/pool"
                            [useRouter]="true"
                            title="Pools"
                            i18n-title
                            *ngIf="permissions.pool.read"
                            class="tc_submenuitem tc_submenuitem_cluster_pool"><span i18n>Pools</span></cds-sidenav-item>
          <cds-sidenav-item route="/hosts"
                            [useRouter]="true"
                            title="Hosts"
                            i18n-title
                            *ngIf="permissions.hosts.read"
                            class="tc_submenuitem tc_submenuitem_cluster_hosts"><span i18n>Hosts</span></cds-sidenav-item>
          <cds-sidenav-item route="/osd"
                            [useRouter]="true"
                            title="OSDs"
                            i18n-title
                            *ngIf="permissions.osd.read"
                            class="tc_submenuitem tc_submenuitem_cluster_osds"><span i18n>OSDs</span></cds-sidenav-item>
          <cds-sidenav-item route="/inventory"
                            [useRouter]="true"
                            title="Physical Disks"
                            i18n-title
                            *ngIf="permissions.hosts.read"
                            class="tc_submenuitem tc_submenuitem_cluster_inventory"><span i18n>Physical Disks</span></cds-sidenav-item>
          <cds-sidenav-item route="/crush-map"
                            [useRouter]="true"
                            title="CRUSH Map"
                            i18n-title
                            *ngIf="permissions.osd.read"
                            class="tc_submenuitem tc_submenuitem_cluster_crush"><span i18n>CRUSH Map</span></cds-sidenav-item>
          <cds-sidenav-item route="/monitor"
                            [useRouter]="true"
                            title="Monitors"
                            i18n-title
                            *ngIf="permissions.monitor.read"
                            class="tc_submenuitem tc_submenuitem_cluster_monitor"><span i18n>Monitors</span></cds-sidenav-item>
        </cds-sidenav-menu>
        <!-- Block Storage -->
        <cds-sidenav-menu title="Block"
                          i18n-title
                          *ngIf="(permissions.rbdImage.read || permissions.rbdMirroring.read|| permissions.iscsi.read) && (enabledFeature.rbd || enabledFeature.mirroring || enabledFeature.iscsi)"
                          class="tc_menuitem_block">
          <svg cdsIcon="datastore"
               icon
               size="20"></svg>
          <cds-sidenav-item route="/block/rbd"
                            [useRouter]="true"
                            title="Images"
                            i18n-title
                            *ngIf="permissions.rbdImage.read && enabledFeature.rbd"
                            class="tc_submenuitem tc_submenuitem_block_images"><span i18n>Images</span></cds-sidenav-item>
          <cds-sidenav-item route="/block/mirroring"
                            [useRouter]="true"
                            title="Mirroring"
                            i18n-title
                            *ngIf="permissions.rbdMirroring.read && enabledFeature.mirroring"
                            class="tc_submenuitem tc_submenuitem_block_mirroring">
            <span i18n>Mirroring
              <small *ngIf="summaryData?.rbd_mirroring?.warnings !== 0"
                     class="badge badge-warning">{{ summaryData?.rbd_mirroring?.warnings }}</small>
              <small *ngIf="summaryData?.rbd_mirroring?.errors !== 0"
                     class="badge badge-danger">{{ summaryData?.rbd_mirroring?.errors }}</small>
            </span>
          </cds-sidenav-item>
          <cds-sidenav-item route="/block/iscsi"
                            [useRouter]="true"
                            title="iSCSI"
                            i18n-title
                            *ngIf="permissions.iscsi.read && enabledFeature.iscsi"
                            class="tc_submenuitem tc_submenuitem_block_iscsi"><span i18n>iSCSI</span></cds-sidenav-item>
          <cds-sidenav-item route="/block/nvmeof"
                            [useRouter]="true"
                            title="NVMe/TCP"
                            i18n-title
                            class="tc_submenuitem tc_submenuitem_block_nvme"><span i18n>NVMe/TCP</span></cds-sidenav-item>
        </cds-sidenav-menu>
        <!-- Object Storage -->
        <cds-sidenav-menu title="Object"
                          i18n-title
                          *ngIf="permissions.rgw.read && enabledFeature.rgw"
                          class="nav-item tc_menuitem_rgw">
          <svg cdsIcon="object-storage"
               icon
               size="20"></svg>
          <cds-sidenav-item route="/rgw/overview"
                            title="Overview"
                            i18n-title
                            [useRouter]="true"
                            class="tc_submenuitem tc_submenuitem_rgw_overview"><span i18n>Overview</span></cds-sidenav-item>
          <cds-sidenav-item route="/rgw/bucket"
                            title="Buckets"
                            i18n-title
                            [useRouter]="true"
                            class="tc_submenuitem tc_submenuitem_rgw_buckets"><span i18n>Buckets</span></cds-sidenav-item>
          <cds-sidenav-item route="/rgw/user"
                            title="Users"
                            i18n-title
                            [useRouter]="true"
                            class="tc_submenuitem tc_submenuitem_rgw_users"><span i18n>Users</span></cds-sidenav-item>
          <cds-sidenav-item route="/rgw/multisite"
                            title="Multi-site"
                            i18n-title
                            [useRouter]="true"
                            class="tc_submenuitem tc_submenuitem_rgw_multi-site"><span i18n>Multi-site</span></cds-sidenav-item>
          <cds-sidenav-item route="/rgw/daemon"
                            title="Gateways"
                            i18n-title
                            [useRouter]="true"
                            class="tc_submenuitem tc_submenuitem_rgw_daemons"><span i18n>Gateways</span></cds-sidenav-item>
          <cds-sidenav-item route="/rgw/nfs"
                            [useRouter]="true"
                            title="NFS"
                            i18n-title
                            *ngIf="permissions.nfs.read && enabledFeature.nfs"
                            class="tc_submenuitem tc_submenuitem_rgw_nfs"><span i18n>NFS</span></cds-sidenav-item>
          <cds-sidenav-item route="/rgw/configuration"
                            [useRouter]="true"
                            title="Configuration"
                            i18n-title
                            class="tc_submenuitem tc_submenuitem_rgw_configuration"><span i18n>Configuration</span></cds-sidenav-item>
        </cds-sidenav-menu>
        <!-- Filesystem -->
        <cds-sidenav-menu title="File"
                          i18n-title
                          *ngIf="permissions.nfs.read && enabledFeature.nfs || permissions.cephfs.read && enabledFeature.cephfs"
                          class="tc_menuitem_file">
          <svg cdsIcon="file-storage"
               icon
               size="20"></svg>
          <cds-sidenav-item route="/cephfs/fs"
                            [useRouter]="true"
                            title="File Systems"
                            i18n-title
                            *ngIf="permissions.cephfs.read && enabledFeature.cephfs"
                            class="tc_submenuitem tc_submenuitem_file_cephfs"><span i18n>File Systems</span></cds-sidenav-item>
          <cds-sidenav-item route="/cephfs/nfs"
                            [useRouter]="true"
                            title="NFS"
                            i18n-title
                            *ngIf="permissions.nfs.read && enabledFeature.nfs"
                            class="tc_submenuitem tc_submenuitem_file_nfs"><span i18n>NFS</span></cds-sidenav-item>
        </cds-sidenav-menu>
        <!-- Observability -->
        <cds-sidenav-menu title="Observability"
                          i18n-title
                          *ngIf="permissions.log.read || permissions.prometheus.read"
                          class="tc_menuitem_observe">
          <svg cdsIcon="observed--hail"
               icon
               size="20"></svg>
          <cds-sidenav-item route="/logs"
                            [useRouter]="true"
                            title="Logs"
                            i18n-title
                            *ngIf="permissions.log.read"
                            class="tc_submenuitem tc_submenuitem_observe_log"><span i18n>Logs</span></cds-sidenav-item>
          <cds-sidenav-item route="/monitoring"
                            [useRouter]="true"
                            title="Alerts"
                            i18n-title
                            *ngIf="permissions.prometheus.read"
                            class="tc_submenuitem tc_submenuitem_observe_monitoring">
            <span i18n>
              <ng-container>Alerts</ng-container>
              <small *ngIf="prometheusAlertService.activeCriticalAlerts > 0"
                     class="badge badge-danger ms-1">{{ prometheusAlertService.activeCriticalAlerts }}</small>
              <small *ngIf="prometheusAlertService.activeWarningAlerts > 0"
                     class="badge badge-warning ms-1">{{ prometheusAlertService.activeWarningAlerts }}</small>
            </span>
          </cds-sidenav-item>
        </cds-sidenav-menu>
        <!-- Administration -->
        <cds-sidenav-menu title="Administration"
                          i18n-title
                          *ngIf="permissions.configOpt.read || permissions.hosts.read"
                          class="tc_menuitem_admin">
          <svg cdsIcon="network--admin-control"
               icon
               size="20"></svg>
          <cds-sidenav-item route="/services/"
                            [useRouter]="true"
                            title="Services"
                            i18n-title
                            *ngIf="permissions.hosts.read"
                            class="tc_submenuitem tc_submenuitem_admin_services"><span i18n>Services</span></cds-sidenav-item>
          <cds-sidenav-item route="/upgrade"
                            [useRouter]="true"
                            title="Upgrade"
                            i18n-title
                            *ngIf="permissions.configOpt.read"
                            class="tc_submenuitem tc_submenuitem_admin_upgrade"><span i18n>Upgrade</span></cds-sidenav-item>
          <cds-sidenav-item route="/ceph-users"
                            [useRouter]="true"
                            title="Ceph Users"
                            i18n-title
                            *ngIf="permissions.configOpt.read"
                            class="tc_submenuitem tc_submenuitem_admin_users"><span i18n>Ceph Users</span></cds-sidenav-item>
          <cds-sidenav-item route="/mgr-modules"
                            [useRouter]="true"
                            title="Manager Modules"
                            i18n-title
                            *ngIf="permissions.configOpt.read"
                            class="tc_submenuitem tc_submenuitem_admin_modules"><span i18n>Manager Modules</span></cds-sidenav-item>
          <cds-sidenav-item route="/configuration"
                            [useRouter]="true"
                            title="Configuration"
                            i18n-title
                            *ngIf="permissions.configOpt.read"
                            class="tc_submenuitem tc_submenuitem_admin_configuration"><span i18n>Configuration</span></cds-sidenav-item>
        </cds-sidenav-menu>
      </cds-sidenav>
    </ng-container>
  </ng-template>
  </div>
